<template>
	<view class="content">
		<uni-nav-bar color="#ffffff" background-color="#007AFF" right-icon="plusempty" title="消息" @clickRight="taptext($event)" />
		<chunLei-popups v-model="showTap" @tapPopup="tapPopup" :popData="tapData" :x="x" :y="y" placement="top-end" dynamic />
		<view class="search-box" @click="tosearch">
			<view class="search-bg">
				<text class="cuIcon-search"></text>
				<input type="text" class="search" disabled="true" placeholder="搜索" />
			</view>
		</view>
		<view class="message-list"><wkiwi-swipe-action :options="options" :messagesList="messages" /></view>
	</view>
</template>

<script>
import wkiwiSwipeAction from '@/components/chat/wkiwi-swipe-action.vue';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import chunLeiPopups from '@/components/chunLei-popups/chunLei-popups.vue';
import { mapMutations } from 'vuex';
export default {
	components: { wkiwiSwipeAction, uniNavBar, chunLeiPopups },
	data() {
		return {
			showTap: false,
			x: 0,
			y: 0,
			tapData: [
				{
					title: '创建群聊',
					uniIcon: 'plus-filled',
					size: 20
				},
				{
					title: '加好友/群',
					uniIcon: 'personadd-filled',
					size: 20
				},
				{
					title: '扫一扫',
					uniIcon: 'scan',
					size: 20
				},
				{
					title: '收付款',
					uniIcon: 'plus-filled',
					size: 20
				}
			],
			focus: false,
			isShowView: true,
			options: [
				{
					text: '置顶',
					style: {
						backgroundColor: '#C7C6CD'
					}
				},
				{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}
			],
			messages: []
		};
	},
	onLoad() {},
	onShow() {
		this.isLogin();
		this.onRefresh();
	},
	watch: {
		'$store.state.onMessage': {
			handler(val, old) {
				if (!val) return;
				this.onRefresh();
				this.$store.state.onMessage = false;
			},
			immediate: true
		}
	},
	methods: {
		...mapMutations(['isLogin']),
		onRefresh() {
			console.log('onRefresh');
			let user = this.$store.state.userInfo;
			// #ifndef  H5
			let sql = 'SELECT a.*,b.friendNickName,b.friendId FROM "index" a LEFT JOIN "rcontact" b ON (b.friendId = a."from"  or b.friendId=a."to" or b.group_id=a.group_id ) and b.userId= \'{0}\'   WHERE a."userId"=\'{0}\'  ORDER BY createTime DESC LIMIT 100'.format(
				user.userId
			);
			this.db.selectSQL(
				sql,
				function(datas) {
					for (let data of datas) {
						data.extras = JSON.parse(data.extras);
						data.url = [this.getImgUrl('user', data.friendId||data.group_id)];
					}
					this.messages = datas;
					console.log(JSON.stringify(this.messages), 'messages');
					this.$store.state.onMessage = false;
				}.bind(this)
			);
			// #endif
			// #ifdef  H5
			this.messages = [{"chatType":2,"content":"<p>1111111111111111111111</p><p>22222222222222222222222222222222222222222222222222222</p>","createTime":"1584517488096","from":"32","to":"37","group_id":"37-32","extras":{},"count":1,"userId":"32","friendNickName":"test","url":["http://122.51.141.95:8762/image/user/32.png"]},{"chatType":2,"content":"<p>333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</p>","createTime":"1584516197088","from":"32","to":"32","group_id":"32-32","extras":{},"count":1,"userId":"32","friendNickName":null,"url":["http://122.51.141.95:8762/image/user/32.png"]}];
			// #endif
		},
		tapPopup(e) {
			if (e.title === '创建群聊') {
				uni.navigateTo({
					url: '/pages/groups/create'
				});
			}
			if (e.title === '加好友/群') {
				uni.navigateTo({
					url: '/pages/chat/search?type=0'
				});
			}
		},
		taptext(e) {
			this.x = e.touches[0].clientX + 10;
			this.y = e.touches[0].clientY - 10;
			this.showTap = !this.showTap;
		},
		tosearch() {
			uni.navigateTo({
				url: '/pages/chat/search'
			});
		}
	},
	onNavigationBarButtonTap(e) {
		if (e.index == 0) {
			this.floatingMenuShow = !this.floatingMenuShow;
		}
	}
};
</script>

<style scoped="true" lang="scss">
.search-box {
	height: 100upx;
	width: 100%;
	background: #d3d3d3;
	display: flex;
	flex-flow: nowrap;
	.search-bg {
		text-align: center;
		box-sizing: border-box;
		height: 70upx;
		padding: 0 30upx;
		line-height: 80upx;
		width: 690upx;
		margin: auto;
		background: rgba(255, 255, 255, 1);
		border-radius: 40upx;
		color: #999;
		display: flex;
		flex-flow: nowrap;
		.search {
			flex: 1;
			height: 80upx;
			line-height: 80upx;
		}
		.iconfont {
			margin-left: 15upx;
		}
	}
}
.floating-menus {
	position: fixed;
	top: 0;
	right: 20upx;
	z-index: 10;
	opacity: 0;
	transition: all 0.4s;
	height: 0;
	overflow: hidden;
}
.floating-menus {
	&.show {
		opacity: 1;
		height: auto;
	}
	&.hidden {
		opacity: 0;
		height: 0;
	}
}
</style>
